<template>
  <div class="container">
    <!-- 目录 -->
    <el-card class="card_style">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="id">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form
        :inline="true"
        class="demo-form-inline"
        :model="queryInfo"
        size="small"
      >
        <el-form-item label="目录名称" class="formstyle">
          <el-input v-model="queryInfo.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态" class="itemstyle">
          <el-select v-model="queryInfo.state">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁止" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="tagsaddref">清除</el-button>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
        <div class="add_content">
          <el-button
            type="text"
            size="mini"
            @click="tutstyle"
            icon="el-icon-back"
            >跳转学科</el-button
          >
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="addtagsFn"
            >新增目录</el-button
          >
        </div>
      </el-form>
      <!-- 显示条数 -->
      <el-alert type="info" show-icon>数据一共{{ this.counts }}条</el-alert>
      <!-- 标签列表 -->
      <el-table :data="tagesList" style="width: 100%">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="tagName" label="所属学科"></el-table-column>
        <el-table-column prop="subjectName" label="标签名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200px">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTime }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span prop="state" v-if="scope.row.state == 1" type="primary"
              >已启用</span
            >
            <span prop="state" v-else type="text">已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="changesataes(scope.row)" size="mini" type="text"
              >{{ scope.row.state ? "禁用" : "启用" }}
            </el-button>
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.state == 1 ? false : true"
              @click="updateId(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.state == 1 ? false : true"
              @click="removeID(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>
    <!--  -->
    <Addtags
      :dialogVisible="visible"
      @handleClose="handleClose"
      @handleOk="handleOk"
      :updataData="updataData"
    />
  </div>
</template>


<script>
import {
  list,
  simple,
  detail,
  add,
  update,
  remove,
  changeState,
} from "@/api/hmmm/tags.js";
import Addtags from "@/module-hmmm/components/tags-add";
export default {
  components: {
    Addtags,
  },
  name: "biaoqian",
  data() {
    return {
      visible: false,
      queryInfo: {
        //当前页数
        page: 1,
        //当前每页显示多少条数据
        pagesize: 10,
        tagName: "",
        subjectID: null,
      },
      tagesList: [],
      counts: 0,
      //控制修改用户对话框的显示与隐藏
      editFialogvisible: false,
      //查询用户信息对象
      aditfrom: {},
      updataData: null,
      addFrom:{
        tagName:'',
        subjectID:''
      }
    };
  },
created() {
    this.gettagList();
    //如果使学科跳转，传递参数
    if (this.id) {
      this.queryInfo.subjectID = this.id;
    }
  },
  methods: {
    addtagsFn() {
      this.updataData = null;
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    handleOk() {
      this.queryInfo = {
        page: 1,
        pagesize: 5,
      };
      this.getList();
      this.handleClose();
    },
    getList() {
      // console.log(this.queryInfo);
      this.gettagList();
    },

    async gettagList() {
      const { data: res } = await list(this.queryInfo);
      try {
        this.tagesList = res.items;
        console.log(res);
        this.counts = res.counts;
      } catch (error) {
        return this.$message.error("获取标签失败");
      }
    },
    //分页数据
    handleSizeChange(newsize) {
      // console.log(newsize);
      this.queryInfo.pagesize = newsize;
      this.gettagList();
    },
    // 分页
    handleCurrentChange(nuwpage) {
      // console.log(nuwpage);
      this.queryInfo.tagName = "";
      this.queryInfo.page = nuwpage;
      this.gettagList();
    },
    // 清除 查询效果
    tagsaddref() {
      this.queryInfo.tagName = "";
      this.queryInfo.state = null;
      this.gettagList();
    },
    // 删除按钮
    async removeID(id) {
      const confirmresult = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmresult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await remove(id);
      this.$message.success("删除成功");
      this.gettagList();
    },
    // 修改按钮
    async updateId(scope) {
      // console.log(id);
      this.updataData = scope;
      this.visible = true;
      // this.editFialogvisible = true;
    },
    tutstyle() {
      this.$router.push("/subjects/list");
    },
    //状态改变
    async changesataes(item) {
      const { data: res } = await changeState({
        id: item.id,
        state: Number(!item.state),
      });
      console.log(res);
      item.state = !item.state;
    },
  },
   watch: {
    id() {
      this.gettagList();
      this.queryInfo.subjectID = null;
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
};
</script>

<style >
.add_content {
  float: right;
}
.block {
  padding-top: 5px;
  float: right;
}
.formstyle {
  margin: 0 0 0 15px;
}
.itemstyle {
  margin: 0 0 0 30px;
}
.el-alert__icon.is-big {
  font-size: 18px;
  width: 16px;
}
</style>
